<template>
<div class="app-container">
  <el-form :inline="true" :model="filters" :rules="rules" ref="ruleForm">
    <el-form-item label="游戏平台" prop="gamePlatformId">
      <el-select v-model="filters.gamePlatformId">
        <el-option
          v-for="item in GAME_PLATFORM_LIST.filter((item)=>{return item.type.includes('noticeOrderData')})"
          :key="item.value"
          :label="item.title"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="处理日期" prop="dealDate">
      <el-date-picker
        v-model="filters.dealDate"
        align="center"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="任务" prop="jobId">
      <el-input maxlength="20" @keyup.enter.native="doGet({action: 'getGrid', form: 'ruleForm'})" v-model="filters.jobId"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="doGet({action: 'getGrid', form: 'ruleForm'})">搜索</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData"
            v-loading="loading"
            element-loading-text="给我一点时间"
            :span-method="mergeCells"
            border
            highlight-current-row>
    <el-table-column align="center" prop="indexLabel" label="指标"></el-table-column>
    <el-table-column align="center" prop="esOrigin" label="数据源ES"></el-table-column>
    <el-table-column align="center" prop="report" label="REPORT"></el-table-column>
    <el-table-column align="center" prop="http" label="HTTP"></el-table-column>
  </el-table>
</div>
</template>

<script>
import { form, grid } from '@/build';
import { GAME_PLATFORM_LIST, NOTICE_DATA_COMPARE_INDEX } from './data';
import {
  getNoticeDataCompareList as getTableList,
} from '@/services/api/gameDataManage';

export default {
  name: 'noticeOrderCompare',
  mixins: [form, grid],
  data() {
    return {
      GAME_PLATFORM_LIST,
      filters: {
        gamePlatformId: undefined,
        dealDate: undefined,
        jobId: undefined,
      },
      rules: {
        gamePlatformId: [
          { required: true, message: '请选择游戏平台' },
        ],
        dealDate: [
          { required: true, message: '请选择处理日期' },
        ],
        jobId: [
          { required: true, message: '请输入任务' },
        ],
      },
      tableData: [],
    };
  },
  methods: {
    mergeCells({ // 合并单元格
      rowIndex, columnIndex,
    }) {
      if (rowIndex <= 1) {
        if (columnIndex === 1) {
          return [1, 3];
        }
      }
    },
  },
  mounted() {
    this.bindGet(getTableList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        if (data.dealDate) {
          data.dealDate += ' 00:00:00';
        }
        return data;
      },
      format: (data) => {
        const listData = NOTICE_DATA_COMPARE_INDEX.map((item) => {
          const obj = {};
          obj.indexLabel = item.indexLabel;
          if (item.childKey) {
            item.key.forEach((ele) => {
              const childObj = data[ele[1]];
              obj[ele[0]] = childObj ? childObj[item.childKey] : '';
              if (_.isArray(obj[ele[0]])) {
                obj[ele[0]] = obj[ele[0]].join(',');
              }
            });
          } else {
            item.key.forEach((ele) => {
              obj[ele[0]] = _.isArray(data[ele[1]]) ? data[ele[1]].join(',') : data[ele[1]];
              if (obj.indexLabel === '日期') {
                obj[ele[0]] = _.toTime(data[ele[1]]);
              }
            });
          }
          return obj;
        });
        return listData;
      },
    });
  },
};
</script>

<style scoped lang="scss">
  /deep/ {
    .el-table{
      margin-top: 18px;
    }
  }
</style>
